<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 家族谱</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-image: url('https://images.unsplash.com/photo-1529946179074-87642f6204d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
        }
        .auth-container {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="auth-container w-full max-w-md rounded-lg p-8">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">家族谱</h1>
            <p class="text-gray-600">连接家族，传承历史</p>
        </div>

        <!-- 登录/注册切换标签 -->
        <div class="flex border-b border-gray-200 mb-6">
            <button id="login-tab" class="flex-1 py-3 font-medium text-center border-b-2 border-blue-500 text-blue-600">登录</button>
            <button id="register-tab" class="flex-1 py-3 font-medium text-center text-gray-500 hover:text-gray-700">注册</button>
        </div>

        <!-- 登录表单 -->
        <div id="login-form" class="block">
            <form>
                <div class="mb-4">
                    <label for="login-username" class="block text-gray-700 text-sm font-medium mb-2">手机号/邮箱</label>
                    <input type="text" id="login-username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入手机号或邮箱">
                </div>
                <div class="mb-6">
                    <label for="login-password" class="block text-gray-700 text-sm font-medium mb-2">密码</label>
                    <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入密码">
                    <div class="flex justify-end mt-1">
                        <a href="#" class="text-sm text-blue-600 hover:underline">忘记密码？</a>
                    </div>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200">登录</button>
            </form>

            <div class="mt-6">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-300"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-3 gap-3">
                    <button class="flex justify-center items-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50">
                        <i class="fab fa-weixin text-green-600 text-xl"></i>
                    </button>
                    <button class="flex justify-center items-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50">
                        <i class="fab fa-qq text-blue-500 text-xl"></i>
                    </button>
                    <button class="flex justify-center items-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50">
                        <i class="fas fa-mobile-alt text-gray-700 text-xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 注册表单 -->
        <div id="register-form" class="hidden">
            <form>
                <div class="mb-4">
                    <label for="register-phone" class="block text-gray-700 text-sm font-medium mb-2">手机号</label>
                    <div class="flex">
                        <input type="text" id="register-phone" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入手机号">
                        <button type="button" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition duration-200">获取验证码</button>
                    </div>
                </div>
                <div class="mb-4">
                    <label for="register-code" class="block text-gray-700 text-sm font-medium mb-2">验证码</label>
                    <input type="text" id="register-code" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入验证码">
                </div>
                <div class="mb-4">
                    <label for="register-password" class="block text-gray-700 text-sm font-medium mb-2">设置密码</label>
                    <input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请设置密码">
                </div>
                <div class="mb-6">
                    <label for="register-confirm" class="block text-gray-700 text-sm font-medium mb-2">确认密码</label>
                    <input type="password" id="register-confirm" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请再次输入密码">
                </div>
                <div class="mb-6 flex items-center">
                    <input type="checkbox" id="agree-terms" class="mr-2">
                    <label for="agree-terms" class="text-sm text-gray-600">我已阅读并同意<a href="#" class="text-blue-600 hover:underline">用户协议</a>和<a href="#" class="text-blue-600 hover:underline">隐私政策</a></label>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200">注册</button>
            </form>

            <div class="mt-6">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-300"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">其他注册方式</span>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-3 gap-3">
                    <button class="flex justify-center items-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50">
                        <i class="fab fa-weixin text-green-600 text-xl"></i>
                    </button>
                    <button class="flex justify-center items-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50">
                        <i class="fab fa-qq text-blue-500 text-xl"></i>
                    </button>
                    <button class="flex justify-center items-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50">
                        <i class="fas fa-envelope text-gray-700 text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 登录/注册切换
        const loginTab = document.getElementById('login-tab');
        const registerTab = document.getElementById('register-tab');
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');

        loginTab.addEventListener('click', function() {
            loginTab.classList.add('border-b-2', 'border-blue-500', 'text-blue-600');
            registerTab.classList.remove('border-b-2', 'border-blue-500', 'text-blue-600');
            registerTab.classList.add('text-gray-500');
            
            loginForm.classList.remove('hidden');
            loginForm.classList.add('block');
            registerForm.classList.remove('block');
            registerForm.classList.add('hidden');
        });

        registerTab.addEventListener('click', function() {
            registerTab.classList.add('border-b-2', 'border-blue-500', 'text-blue-600');
            loginTab.classList.remove('border-b-2', 'border-blue-500', 'text-blue-600');
            loginTab.classList.add('text-gray-500');
            
            registerForm.classList.remove('hidden');
            registerForm.classList.add('block');
            loginForm.classList.remove('block');
            loginForm.classList.add('hidden');
        });
    </script>
</body>
</html> 